page {
  /* background-color: #F7F7F7; */
  /* overflow: hidden; */
}

.dispatch_way {
  position: fixed;
  z-index: 11;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .dispatch_list {
    width: 580rpx;
    background: #FFFFFF;
    border-radius: 25rpx;
    padding: 80rpx 50rpx;

    .title_describe {
      display: flex;
      flex-direction: column;
      align-items: center;
      .title {
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #131313;
        margin-bottom: 20rpx;
      }
      .describe {
        margin-top: 30rpx;
        margin-bottom: 60rpx;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        opacity: 0.8;

      }
    }

    .dispatch_item {
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 480rpx;
      height: 142rpx;
      background: #F8F8F8;
      border-radius: 10rpx;
      padding: 0 60rpx 0 53rpx;

      .item_title_describe {
        .item_title {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #131313;
        }
        .item_describe {
          margin-top: 16rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #4AB759;

        }
      }

      image {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }

  .dispatch_close {
    width: 60rpx;
    margin: 47rpx auto 0;
  }
}

.pur_bottom_box {
  display:flex;
  align-items:center;
  justify-content: flex-end;
  position:fixed;
  z-index:2;
  bottom: calc(100rpx + env(safe-area-inset-bottom));

  left:50%;
  transform: translateX(-50%);
  margin: 0 auto;
  /* width: 686rpx; */
  width: 100%;
  height: 96rpx;
  background: #2D1C11;
  box-shadow: 0rpx 2rpx 7rpx 0rpx rgba(0, 0, 0, 0.12);
  /* border-radius: 15rpx 15rpx 0 0; */
  .icon_box {
    position:absolute;
    width: 104rpx;
    height: 104rpx;
    left:16rpx;
    bottom:27rpx;
    .pro_count {
      position:absolute;
      right:-6rpx;
      bottom:3rpx;
      width: 30rpx;
      height: 30rpx;
      line-height:30rpx;
      text-align: center;
      background: #FE7316;
      border-radius: 50%;
      font-size: 23rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;

    }
  }

  .price_btn_box {
    margin-right: 30rpx;
    display:flex;
    align-items:center;
    .amount {
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      margin-right:45rpx;

    }
    .settle {
      padding: 0 20rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align:center;
      background: #FFB72F;
      border-radius: 25rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;

    }
  }
}

.sku_content {
  padding: 55rpx 60rpx 0rpx;
  position: relative;
  .close {
    position: fixed;
    top: 48rpx;
    left:679rpx;
    height:26rpx;
    width:26rpx;
  }
  .header {
    display:flex;
    align-items:center;
    image {
      width: 200rpx;
      height: 200rpx;
      border-radius: 15rpx;
      margin-right:30rpx;
    }
    .info {
      .price {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FE7316;
      }
      .stock {
        margin-top: 23rpx;
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #131313;
        opacity: 0.8;
      }
    }
  }
  .label_box {
    margin-top: 40rpx;
    display:flex;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #131313;
    image {
      height:23rpx;
      width: 23rpx;
      margin-right:8rpx;
    }
    .label_item {
      margin-right: 70rpx;
      display: flex;
      align-items: center;
    }
  }
  .sku_box {
    margin-top: 10rpx;
    .sku_item {
      margin-top: 60rpx;
      .label {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #131313;
        margin-bottom: 20rpx;
      }
      .sku_child_box {
        display: flex;
        flex-wrap:wrap;
        .sku_child_item {
          &.active {
            color: #fff;
            background: #FFB72F;
          }
          margin: 20rpx 0;
          margin-right: 50rpx;
          padding: 16rpx 32rpx;
          border: 1px solid #EAEAEA;
          border-radius: 30px;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #131313;
          
        }
        .sku_child_item:first-child {
          margin-left: 0;
        }
      }
    }
  }
  .sku_count_box {
    margin-top: 70rpx;
    display:flex;
    align-items: center;
    justify-content: space-between;
    .label {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #131313;
    }
    .sku_count_content {
      display:flex;
      align-items: center;
      view {
        width: 50rpx;
        height: 50rpx;
        background: #E6E6E6;
        border-radius: 4rpx;
        font-size: 20rpx;
        line-height: 50rpx;
        text-align: center;
      }

      .count {
        margin: 0 10rpx;
        width: 70px;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #131313;
      }

    }
  }
  .btns {
    margin-top:50rpx;
    padding-bottom:env(safe-area-inset-bottom);
    display: flex;
    align-items:center;
    justify-content: center;
    .add_pur {
      margin-right:50rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      text-align: center;
      font-weight: bold;
      color: #FFB72F;
      width: 200rpx;
      height: 60rpx;
      line-height: 60rpx;
      border: 2rpx solid #FFB72F;
      border-radius: 30rpx;
    }
    .buy_now {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #FFFFFF;
      width: 200rpx;
      height: 60rpx;
      line-height:60rpx;
      text-align:center;
      background: #FFB72F;
      border-radius: 30rpx;
      
    }
  }
}
.dianpufenlei {
  padding-top: 20rpx;
  height: 100vh;
  display:flex;
  .left {
    flex: 1;
    display: flex;
    background-color: #F7F7F7;
    height: 100vh;
    .scroll_view {
      height: 1300rpx;
      .classify_item {
        &.active {
          color: #fff;
          background:#FFB72F;
        }
        display: flex;
        box-sizing: border-box;
        padding-left: 30rpx;
        width: 164rpx;
        height: 92rpx;
        line-height: 92rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #131313;
        opacity: 0.8;
        .count {
          margin-top: 28rpx;
          margin-left: 6rpx;
          line-height: 24rpx;
          text-align: center;
          width: 24rpx;
          height: 24rpx;
          background: #FE7316;
          border-radius: 50%;
          font-size: 16rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      
    }
    

  }
  .right {
    position: relative;
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    align-items:center;
    width: 586rpx;
    background: #fff;

    .shade {
      position: absolute;
      z-index: 4;
      top:0;
      bottom: 0;
      left: 0;
      right: 0;
      background: #050505;
      opacity: 0.3;
    }

    .two_classify {
      /* position: fixed; */
      z-index: 10;
      background: #fff;
      padding: 40rpx 30rpx 0 30rpx;
      width: 586rpx;
      box-sizing:border-box;
      
      .two_classify_hide {
        display:flex;
        justify-content: space-between;
        align-items: center;
        .scroll_view {
          width: 394rpx;
          flex: 1;
          overflow: hidden;
          white-space: nowrap; 
          .two_classify_item {
            &.active {
              background: #FE7316;
              color: #fff;
            }
            display:inline-block;
            width: 118rpx;
            height: 46rpx;
            line-height: 46rpx;
            margin-right: 20rpx;
            text-align:center;
            background: #F7F7F7;
            border-radius: 8rpx;
            font-size: 24rpx;
            color: #131313;
            opacity: 0.8; 
          }
        }
        .two_classify_all {
          font-size: 26rpx;
          font-weight: 500;
          color: #FE7316;
        }
      }

      .two_classify_show {
        background: #fff;
        padding-bottom:66rpx;
        .title_bar {
          margin-top: 10rpx;
          display:flex;
          align-items:center;
          justify-content:space-between;
          .title {
            font-size: 26rpx;
            font-weight: bold;
            color: #131313;
          }
          .two_classify_btn {
            /* margin-top:12rpx; */
            font-size: 26rpx;
            font-weight: 500;
            color: #FE7316;
          }
        }
        .classify_show_box {
          margin-top: 30rpx;
          .two_classify_item {
            &.active {
              background: #FE7316;
              color: #fff;
            }
            display:inline-block;
            width: 116rpx;
            height: 46rpx;
            line-height: 46rpx;
            margin-right: 20rpx;
            text-align:center;
            background: #F7F7F7;
            border-radius: 8rpx;
            font-size: 24rpx;
            color: #131313;
            opacity: 0.8; 
          }
          .two_classify_item:nth-child(4n) {
            margin-right:0;
          }
          .two_classify_item:nth-child(n + 5) {
            margin-top: 20rpx;
          }
        }
      }
      
    }

    .goods_list {
      position: relative;
      width: 100%;

      .goods_list_item {
        .two_title {
          background: #FFFFFF;
          padding: 32rpx 40rpx 12rpx;
        }

        .goods_list_box {
          padding-top: 20rpx;
          padding-left: 40rpx;
        .goods_box {
          display:flex;
          margin-bottom: 40rpx;
          .img_box {
            position: relative;
            width: 130rpx;
            height: 130rpx;
            border-radius: 15rpx;
            overflow: hidden;
            margin-right: 20rpx;
            .image {
              width: 130rpx;
              height: 130rpx;
            }
            .not_goods {
              position:absolute;
              bottom: 0;
              width: 130rpx;
              height: 34rpx;
              background: rgba(0, 0 ,0, .5);
              font-size: 24px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #FFFFFF;
              line-height: 33rpx;
              text-align: center;
            }
          }
          .right_info {
            width: 362rpx;
            display: flex;
            flex-direction: column; 
            justify-content: space-between;

            .title {
              width: 334rpx;
              font-size: 32rpx;
              font-family: PingFang SC;
              font-weight: bold;
              color: #131313;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .right_info_bottom {
              display:flex;
              justify-content: space-between;
              align-items: flex-end;
              .price {
                font-size: 28rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #FE7316;
              }
              .add_btn {
                .select_sku {
                  height:40rpx;
                  width: 120rpx;
                  line-height: 40rpx;
                  text-align: center;
                  border-radius: 20rpx;
                  color: #fff;
                  font-size: 26rpx;
                  background: #FFB72F;
                }
                .count_box {
                  display: flex;
                  align-items: center;
                  font-weight: bold;
                  .subtract {
                    font-size: 30rpx;
                    text-align: center;
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 34rpx;
                    color: #FFB72F;
                    border: 1rpx solid #FFB72F;
                    border-radius: 50%;
                    opacity: 0.8;
                  }
                  .count {
                    margin: 0 25rpx;
                    font-size: 28rpx;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #131313;
                  }

                  .add {
                    font-size: 30rpx;
                    text-align: center;
                    width: 40rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    color: #fff;
                    width: 40rpx;
                    height: 40rpx;
                    background: #FFB72F;
                    border-radius: 50%;
                  }
                }

              }
            }
          }
        }

        }

      }
    }
  }
}